<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>投股中心</title>
    <link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body class="uf uf-ver">

<!--header-->
<div id="header">
    <div class="center ub">
        <div class="navLeft Btn" onclick="window.history.go(-1);"></div>
        <h1 id="title" class="ub-f">股票池</h1>

        <div class="navRight"></div>
    </div>
</div>
<!--tab-->
<div id="tab">
    <div class="ub">
        <div class="ub-f ub ub-ac ub-pc tabIndex active" onclick="tabSelect(this)">个股策略</div>
        <div class="ub-f ub ub-ac ub-pc tabIndex" onclick="tabSelect(this)">持股记录</div>
    </div>
</div>
<!--content-->
<div id="content" class="uf-f bgc">
    <div id="tabContent">
        <!--个股策略-->
        <div class="tabArea active">

            <div class="stockCard">
                <a href="stockPoolStrategy.html">
                    <div class="ub ub-ac">
                        <div class="icon"></div>
                        <div class="info ub-f">
                            <div>持股信息</div>
                            <div class="name">宝钢国际</div>
                        </div>
                        <span class="link">查看策略</span>

                        <div class="arrowRight"></div>
                    </div>
                    <div class="main uf uf-pja">
                        <div class="mainInfo"><span>股票代码</span><br>600019</div>
                        <div class="mainInfo"><span>持股状态</span><br>持股中</div>
                    </div>
                </a>

                <div class="detailInfo">
                    <div class="infoBox">
                        <div><span>买入区间：</span>5.0-5.5</div>
                        <div><span>目标价位：</span>6.5-7.0</div>
                        <div><span>仓位比例：</span>3成</div>
                        <div><span>止损区间：</span>4.0-4.5</div>
                    </div>
                </div>
                <div class="arrow ub ub-pc ub-ac" onclick="showDetail(this);">
                    <div class="iconArrow"></div>
                </div>
            </div>
            <div class="stockCard">
                <a href="stockPoolStrategy.html">
                    <div class="ub ub-ac">
                        <div class="icon"></div>
                        <div class="info ub-f">
                            <div>持股信息</div>
                            <div class="name">宝钢国际</div>
                        </div>
                        <span class="link">查看策略</span>

                        <div class="arrowRight"></div>
                    </div>
                    <div class="main uf uf-pja">
                        <div class="mainInfo"><span>股票代码</span><br>600019</div>
                        <div class="mainInfo"><span>持股状态</span><br>持股中</div>
                    </div>
                </a>

                <div class="detailInfo">
                    <div class="infoBox">
                        <div><span>买入区间：</span>5.0-5.5</div>
                        <div><span>目标价位：</span>6.5-7.0</div>
                        <div><span>仓位比例：</span>3成</div>
                        <div><span>止损区间：</span>4.0-4.5</div>
                    </div>
                </div>
                <div class="arrow ub ub-pc ub-ac" onclick="showDetail(this);">
                    <div class="iconArrow"></div>
                </div>
            </div>

        </div>
        <!--持股记录-->
        <div class="tabArea">

            <div class="stockCard">
                <a href="stockPoolStrategy.html">
                    <div class="ub ub-ac">
                        <div class="icon"></div>
                        <div class="info ub-f">
                            <div>持股信息</div>
                            <div class="name">宝钢国际</div>
                        </div>
                        <span class="link">查看策略</span>

                        <div class="arrowRight"></div>
                    </div>
                    <div class="main uf uf-pja">
                        <div class="mainInfo"><span>股票代码</span><br>600019</div>
                        <div class="mainInfo"><span>持股状态</span><br>持股中</div>
                    </div>
                </a>

                <div class="detailInfo">
                    <div class="infoBox">
                        <div><span>买入区间：</span>5.0-5.5</div>
                        <div><span>卖出区间：</span>6.5-7.0</div>
                        <div><span>建仓时间：</span>2017-04-03</div>
                        <div><span>了结时间：</span>2017-05-03</div>
                    </div>
                </div>
                <div class="arrow ub ub-pc ub-ac" onclick="showDetail(this);">
                    <div class="iconArrow"></div>
                </div>
            </div>
            <div class="stockCard">
                <a href="stockPoolStrategy.html">
                    <div class="ub ub-ac">
                        <div class="icon"></div>
                        <div class="info ub-f">
                            <div>持股信息</div>
                            <div class="name">宝钢国际</div>
                        </div>
                        <span class="link">查看策略</span>

                        <div class="arrowRight"></div>
                    </div>
                    <div class="main uf uf-pja">
                        <div class="mainInfo"><span>股票代码</span><br>600019</div>
                        <div class="mainInfo"><span>持股状态</span><br>持股中</div>
                    </div>
                </a>

                <div class="detailInfo">
                    <div class="infoBox">
                        <div><span>买入区间：</span>5.0-5.5</div>
                        <div><span>卖出区间：</span>6.5-7.0</div>
                        <div><span>建仓时间：</span>2017-04-03</div>
                        <div><span>了结时间：</span>2017-05-03</div>
                    </div>
                </div>
                <div class="arrow ub ub-pc ub-ac" onclick="showDetail(this);">
                    <div class="iconArrow"></div>
                </div>
            </div>

        </div>
    </div>

</div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script>

    $(document).ready(function () {

        showFirst();//展开第一条

        scrollBar();
    });

    (function () {
        if (sessionStorage.getItem('stockPool.msgWarn'))return;
        sessionStorage.setItem('stockPool.msgWarn', 1);
        var content = '股票在市场上的买卖价格，是每一个投资者最关心的问题，自从有了股票市场，各种股票分析专家和资深的投资者便孜孜不倦地探求分析和预测股价的方法，有些人从市场供需关系入手，演变成股价技术分析方法，有些人从影响股价的因素关系分析入手，形成了股价基本分析方法，对于股价的技术分析理论及方法。'
        layer.open({//询问框
            title: '早评',
            content: content,
            btn: '确定',
            yes: function (layerId) {

                layer.close(layerId);//关闭
            }
        });

    })();

    function tabSelect(e) {//切换tab
        var $e = $(e), index = $e.index(), tabArr = $('#tabContent').find('.tabArea');
        if ($e.hasClass('active'))return;
        $e.addClass('active').siblings().removeClass('active');
        $(tabArr[index]).addClass('active').siblings().removeClass('active');
    }

    function showDetail(e) {//收起或展开
        var $e = $(e), $d = $e.siblings('.detailInfo');
        if ($e.hasClass('show')) {//收起
            $e.removeClass('show');
            $d.css('display', 'none');
        } else {//展开
            $e.addClass('show');
            $d.css('display', 'block');
        }
    }
    function showFirst() {//展开第一条卡片
        $('.stockCard:first-child .arrow').addClass('show');
        $('.stockCard:first-child .detailInfo').css('display', 'block');
    }
</script>
</body>
</html>